<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>正则表达式 | 学习笔记</title><meta name="author" content="lzoxun"><meta name="copyright" content="lzoxun"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="作用1234-   数据隐藏(&#96;180****9356&#96;)-   数据采集(爬虫)-   数据过滤(&#96;你是****&#96;)-   数据验证(手机好，网址...) JS 正则方法12345678910111213141516171819202122232425262728293031323334353637383940-   创建正则    -   &#96;var reg &#x3D; &#x2F;^xxx&#x2F;ig&#96;：字面量方式">
<meta property="og:type" content="article">
<meta property="og:title" content="正则表达式">
<meta property="og:url" content="http://example.com/2023/07/22/web/RegExp/index/index.html">
<meta property="og:site_name" content="学习笔记">
<meta property="og:description" content="作用1234-   数据隐藏(&#96;180****9356&#96;)-   数据采集(爬虫)-   数据过滤(&#96;你是****&#96;)-   数据验证(手机好，网址...) JS 正则方法12345678910111213141516171819202122232425262728293031323334353637383940-   创建正则    -   &#96;var reg &#x3D; &#x2F;^xxx&#x2F;ig&#96;：字面量方式">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png">
<meta property="article:published_time" content="2023-07-22T07:14:09.692Z">
<meta property="article:modified_time" content="2023-07-22T07:14:09.692Z">
<meta property="article:author" content="lzoxun">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="http://example.com/2023/07/22/web/RegExp/index/index.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = {
  root: '/',
  algolia: undefined,
  localSearch: {"path":"/search.xml","preload":true,"top_n_per_article":1,"unescape":true,"languages":{"hits_empty":"找不到您查询的内容：${query}","hits_stats":"共找到 ${hits} 篇文章"}},
  translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"簡"},
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  dateSuffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: {"chs_to_cht":"你已切换为繁体","cht_to_chs":"你已切换为简体","day_to_night":"你已切换为深色模式","night_to_day":"你已切换为浅色模式","bgLight":"#49b1f5","bgDark":"#1f1f1f","position":"bottom-left"},
  source: {
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: true,
  isAnchor: false,
  percent: {
    toc: true,
    rightside: false,
  },
  autoDarkmode: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: '正则表达式',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2023-07-22 15:14:09'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
    win.getCSS = (url,id = false) => new Promise((resolve, reject) => {
      const link = document.createElement('link')
      link.rel = 'stylesheet'
      link.href = url
      if (id) link.id = id
      link.onerror = reject
      link.onload = link.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        link.onload = link.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(link)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          const now = new Date()
          const hour = now.getHours()
          const isNight = hour <= 6 || hour >= 18
          if (t === undefined) isNight ? activateDarkMode() : activateLightMode()
          else if (t === 'light') activateLightMode()
          else activateDarkMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><meta name="generator" content="Hexo 6.3.0"></head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><script>(()=>{
  const $loadingBox = document.getElementById('loading-box')
  const $body = document.body
  const preloader = {
    endLoading: () => {
      $body.style.overflow = ''
      $loadingBox.classList.add('loaded')
    },
    initLoading: () => {
      $body.style.overflow = 'hidden'
      $loadingBox.classList.remove('loaded')
    }
  }

  preloader.initLoading()
  window.addEventListener('load',() => { preloader.endLoading() })

  if (false) {
    document.addEventListener('pjax:send', () => { preloader.initLoading() })
    document.addEventListener('pjax:complete', () => { preloader.endLoading() })
  }
})()</script><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "" data-lazy-src="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">108</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">1</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">0</div></a></div><hr class="custom-hr"/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header"><nav id="nav"><span id="blog-info"><a href="/" title="学习笔记"><span class="site-name">学习笔记</span></a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search" href="javascript:void(0);"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">正则表达式</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2023-07-22T07:14:09.692Z" title="发表于 2023-07-22 15:14:09">2023-07-22</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2023-07-22T07:14:09.692Z" title="更新于 2023-07-22 15:14:09">2023-07-22</time></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="正则表达式"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h3 id="作用"><a href="#作用" class="headerlink" title="作用"></a>作用</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">-   数据隐藏(<span class="string">`180****9356`</span>)</span><br><span class="line">-   数据采集(爬虫)</span><br><span class="line">-   数据过滤(<span class="string">`你是****`</span>)</span><br><span class="line">-   数据验证(手机好，网址...)</span><br></pre></td></tr></table></figure>
<h3 id="JS-正则方法"><a href="#JS-正则方法" class="headerlink" title="JS 正则方法"></a>JS 正则方法</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line">-   创建正则</span><br><span class="line">    -   <span class="string">`var reg = /^xxx/ig`</span>：字面量方式</span><br><span class="line">    -   <span class="string">`var reg = new RegExp(&quot;^xxx&quot;,&quot;ig&quot;)`</span> 或 <span class="string">`new RegExp(/xyz/i)`</span>：构造行数创建</span><br><span class="line">    -   第一中正则在编译时就创建，实例的正则在运行是才创建</span><br><span class="line">-   匹配模式(修饰符)</span><br><span class="line">    -   表示正则的附加规则，放在最后面</span><br><span class="line">    -   <span class="string">`i:ignore`</span> 忽略大小写</span><br><span class="line">    -   <span class="string">`g:global`</span> 全局匹配，匹配字符串中所有匹配的词</span><br><span class="line">    -   <span class="string">`m:多行修饰符`</span></span><br><span class="line">        -   <span class="string">`/^(abcd|2345)$/m.test(&quot;abcd\n2345&quot;)`</span> 匹配到 abcd 和 <span class="number">2345</span></span><br><span class="line"></span><br><span class="line">-   <span class="variable constant_">JS</span> 正则对象提供的方法</span><br><span class="line">    -   <span class="string">`reg.test(&quot;str&quot;);`</span>:test 验证 str 中是否存在符合规则的子字符串</span><br><span class="line">    -   <span class="string">`reg.test([&quot;str1&quot;,&quot;str2&quot;,&quot;strn&quot;])`</span>:只要一个符合条件就返回<span class="literal">true</span></span><br><span class="line">    -   <span class="string">`reg.exec(&quot;str&quot;);`</span>:exec 返回 str 中，匹配到的符合规则的第一个子字符串,与<span class="string">`小括号包裹`</span>的子表达式，不匹配返回<span class="string">`null`</span></span><br><span class="line">        -   reg.<span class="title function_">exec</span>(<span class="string">&quot;str&quot;</span>); 第一次调用返回第一个匹配的字符串，第二次调用返回第二个匹配的字符串，没了返回<span class="literal">null</span></span><br><span class="line">        -   reg.<span class="property">index</span> 查看匹配字符串的索引</span><br><span class="line">-   一些属性</span><br><span class="line">    -   <span class="string">`reg.lastIndex`</span></span><br><span class="line">        -   正则的实例属性 lastIndex,初始情况下都是从零开始，当第二次调用这个实例匹配字符串时是从</span><br><span class="line">        -   上一次匹配完成位置的下一个位置开始。（当然正则实例是开启全局的 g或y）</span><br><span class="line">            -   <span class="number">1.</span>如果上次匹配到了一个位置大于等于此次匹配的字符串的长度，那么此次匹配返回<span class="literal">false</span>或空数组</span><br><span class="line">            -   <span class="number">2.</span>如果上次没有匹配到，那么此次匹配还是从零开始</span><br><span class="line">    -   <span class="string">`reg.source`</span></span><br><span class="line">        -   <span class="string">`/abc/ig.source`</span> 返回正文 abc</span><br><span class="line">    </span><br><span class="line">-   <span class="title class_">String</span> 方法提供的方法</span><br><span class="line">    -   <span class="string">`str.search(reg)`</span>:从 str 中查找 reg 匹配到子字符串的<span class="string">`起始位置`</span>,没有返回<span class="string">`-1`</span></span><br><span class="line">    -   <span class="string">`str.match(reg)`</span>:以数组模式返回 str 中所以符合 reg 要求的子字符串,和正则的<span class="string">`exec`</span>类似,并通过 g 获取所以匹配项</span><br><span class="line">    -   <span class="string">`str.replace(reg，callback|char)`</span>:把匹配到的子字符串进行替换</span><br><span class="line">        -   callback参数</span><br><span class="line">            -   如果没有子表达式，参数二是匹配字符串起始位置</span><br><span class="line">                -   <span class="title function_">callback</span>(<span class="function">(<span class="params">每次匹配,小括号<span class="number">1</span>，index</span>)=&gt;</span>&#123;xxx&#125;)</span><br><span class="line">            -   如果存在子表达式，参数是，匹配字符串、子<span class="number">1</span>、子n、匹配字符串起始位置</span><br><span class="line">                -   <span class="title function_">callback</span>(<span class="function">(<span class="params">每次匹配,小括号<span class="number">1</span>，小括号n,index</span>)=&gt;</span>&#123;xxx&#125;)</span><br><span class="line">        -   <span class="string">&quot;12liao34zhong56xun&quot;</span>.<span class="title function_">replace</span>(<span class="regexp">/([a-zA-Z]+)/g</span>,<span class="function">(<span class="params">item</span>)=&gt;</span> item.<span class="title function_">substring</span>(<span class="number">0</span>,<span class="number">1</span>).<span class="title function_">toUpperCase</span>()+item.<span class="title function_">substring</span>(<span class="number">1</span>))</span><br><span class="line">        - 将匹配到的数据处理后使用:<span class="string">`&quot;hello&quot;.replace(/^\S/, s =&gt; s.toUpperCase())`</span></span><br><span class="line">    -   <span class="string">`str.replaceAll(reg，callback|char)`</span></span><br><span class="line">        -   正则reg必须加g全局匹配</span><br><span class="line">    -   <span class="string">`str.split(reg)`</span>:通过 str 中 reg 匹配到的子字符串进行分割(默认 g)</span><br></pre></td></tr></table></figure>
<h3 id="重要概念"><a href="#重要概念" class="headerlink" title="重要概念"></a>重要概念</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">-   子表达式\</span><br><span class="line">    -   通过小括号括起来的内容称<span class="string">`子表达式`</span></span><br><span class="line">-   捕获</span><br><span class="line">    -   字表达式匹配到内容时，系统会捕获这个行为，然后将字表达式匹配到的内容放到缓存区中，成为<span class="string">`捕获`</span></span><br><span class="line">    -   第一个捕获编号 <span class="number">1</span>,等 n 个编号 n</span><br><span class="line">-   反向引用</span><br><span class="line">    -   通过\<span class="title function_">n</span>(n&gt;<span class="number">0</span> 的，代表缓存区编号)来获取缓存区域的内容</span><br><span class="line">    -   在表达式中使用已近查到的结果</span><br><span class="line">-   经典案例(str = <span class="string">&quot;abc22333444&quot;</span>)</span><br><span class="line">    -   找到至少连续的三位相同数字</span><br><span class="line">        -   <span class="string">`/(\d)\1\1/g`</span>:(\d)捕获，通过反向拿到缓存区 <span class="number">1</span> 中的内容</span><br></pre></td></tr></table></figure>
<h3 id="小阔号的功能"><a href="#小阔号的功能" class="headerlink" title="小阔号的功能"></a>小阔号的功能</h3><blockquote>
<p>查询处符合条件的字符串，只要一个符合条件则反 true,判断全部 &#x3D;&gt; (?&lt;!xxx) 只要一个不符合条件返回true,所有不符合返回false</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">-   ():默认捕获效果，可通过\n 反向引用匹配的值</span><br><span class="line">-   (?:xxx):非捕获匹配，不会影响\n</span><br><span class="line">    -   (?:X)在正则中表示所匹配的子组X不作为结果输出</span><br><span class="line">-   (?=xxx):非捕获匹配，<span class="string">`正向肯定预查|先行断言`</span>,相当与添加条件限制<span class="string">`/^(?=.*8060$)xxxx`</span>,表达式必须以 <span class="number">8060</span> 结尾</span><br><span class="line">    -   <span class="string">`/hello(?=\d&#123;3&#125;)/.exec(&quot;hello123&quot;)`</span>:hello 后面必须是三个数字</span><br><span class="line">    -   我要提取的只是 hello,但是这个 hello 后面必须跟着 <span class="number">3</span> 个数字</span><br><span class="line">    -   <span class="string">`/(?=\d&#123;3&#125;)/.exec(&quot;hello123&quot;)`</span>：如果没有hello，匹配的就是后面有三个数字的位置</span><br><span class="line">-   (?!xxx):非捕获匹配,<span class="string">`正向否定预查|先行否定断言`</span>,相当于添加条件限制<span class="string">`/^(?!.*8060$)xxxx`</span>,表达式不能以 <span class="number">8060</span> 结尾</span><br><span class="line">    -   <span class="string">`/\d&#123;4&#125;(?![a-zA-Z])/exec(&quot;3243##&quot;)`</span>:数字后面不能出现字母</span><br><span class="line">-   (?\&lt;=xxx):非捕获匹配,<span class="string">`反向肯定预查`</span>,相当于添加条件限制（先找到四个字母，再看看四个字母左边是否出现三个数字 ）</span><br><span class="line">    -   <span class="string">`/(?&lt;=\d&#123;3&#125;)[a-zA-Z]&#123;4&#125;/.exec(&quot;123fdsf&quot;)`</span>:连续 <span class="number">4</span> 个字母左边必须出现 <span class="number">3</span> 个数字</span><br><span class="line">    -   先确定字符串中有 <span class="number">3</span> 个连续数字，找到了，再看后面的字符是否匹配</span><br><span class="line">-   (?\&lt;!xxx):非捕获匹配,<span class="string">`反向否定预查`</span>,相当于添加条件限制</span><br><span class="line">    -   <span class="string">`/(?&lt;!\d&#123;3&#125;)[a-zA-Z]&#123;4&#125;/.exec(&quot;123fdsf&quot;)`</span>:连续 <span class="number">4</span> 个字母左边不能是 <span class="number">3</span> 个数字</span><br><span class="line">    -   字符串中只要<span class="number">1</span>个连续 <span class="number">4</span> 个字母左边不是<span class="number">3</span>个数字,就返回<span class="literal">true</span>,全部都不是返回<span class="literal">false</span></span><br><span class="line">        -   是否全部str|max前面都是$</span><br><span class="line">            -   <span class="string">`!/(?&lt;!\$)(str|max)/.test(&quot;xx$strxx$maxxxx$strxxx$max&quot;)`</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 前瞻：</span></span><br><span class="line"><span class="title function_">exp1</span>(?=exp2) 查找exp2前面的exp1</span><br><span class="line"><span class="comment">// 后顾：</span></span><br><span class="line">(?&lt;=exp2)exp1 查找exp2后面的exp1</span><br><span class="line"><span class="comment">// 负前瞻：</span></span><br><span class="line"><span class="title function_">exp1</span>(?!exp2) 查找后面不是exp2的exp1</span><br><span class="line"><span class="comment">// 负后顾：</span></span><br><span class="line">(?&lt;!exp2)exp1 查找前面不是exp2的exp1</span><br></pre></td></tr></table></figure>
<h3 id="编写规则"><a href="#编写规则" class="headerlink" title="编写规则"></a>编写规则</h3><blockquote>
<p>正则表达式是由所有字符以及特殊字符(元字符组成)的<code>文字模式</code>， 正则表达式作为一个模板，将<code>文字模式</code>与搜索到的字符串进行匹配</p>
</blockquote>
<h4 id="查什么-匹配符"><a href="#查什么-匹配符" class="headerlink" title="查什么(匹配符)"></a>查什么(匹配符)</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">-   需要什么字符就填什么字符，元字符就前面加反斜杠\</span><br><span class="line">-   js 可以直接匹配具体汉字，有些语言是不可以的</span><br><span class="line">-   字符簇</span><br><span class="line">    -   [a-zA-<span class="variable constant_">Z0</span>-<span class="number">9</span>]</span><br><span class="line">        -   [<span class="variable constant_">ASCII</span>]从上到下的顺序都可以如：[Z-a]可以匹配 Z、、\[、\],^ 等字符</span><br><span class="line">    -   [abc]: 匹配A或B或C</span><br><span class="line">    -   [^abc]: 取反，就不匹配 A、B、C</span><br><span class="line">    -   [\u4e00-\u9fa5]: 匹配中文</span><br><span class="line">-   <span class="string">`\d`</span>:匹配纯数字，<span class="string">`\D`</span>取反</span><br><span class="line">-   <span class="string">`\w`</span>:数字字母下划线，<span class="string">`\W`</span>取反</span><br><span class="line">-   <span class="string">`\s`</span>:任意空白字符,<span class="string">`\S`</span>取反，非空白字符</span><br><span class="line">-   <span class="string">`.`</span>:匹配处理回车<span class="string">`\n`</span>外任意单个字符 =&gt; 任意单字符<span class="string">`[^]`</span></span><br></pre></td></tr></table></figure>
<h4 id="差多少-限定符"><a href="#差多少-限定符" class="headerlink" title="差多少(限定符)"></a>差多少(限定符)</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">-   <span class="string">`*`</span>:匹配前面次数 <span class="number">0</span> 次或多次&#123;<span class="number">0</span>,&#125;,<span class="string">`.*`</span>任意多次任意字符</span><br><span class="line">-   <span class="string">`+`</span>:匹配前面次数 <span class="number">1</span> 次或多次&#123;<span class="number">1</span>,&#125;</span><br><span class="line">-   <span class="string">`?`</span>:匹配前面次数 <span class="number">0</span> 次或 <span class="number">1</span> 次</span><br><span class="line">-   <span class="string">`&#123;n&#125;`</span>:n 次</span><br><span class="line">-   <span class="string">`&#123;n,&#125;`</span>:至少 n 次</span><br><span class="line">-   <span class="string">`&#123;n,m&#125;`</span>:n 次到 m 次</span><br></pre></td></tr></table></figure>
<h4 id="从哪差-定位符"><a href="#从哪差-定位符" class="headerlink" title="从哪差(定位符)"></a>从哪差(定位符)</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">-   <span class="string">`^`</span>:<span class="string">`[]`</span>外，匹配字符串开始位置</span><br><span class="line">-   <span class="string">`$`</span>:匹配字符串结束位置</span><br><span class="line">-   <span class="string">`\b`</span>:匹配单词边界(小数点也是单词边界)</span><br><span class="line">    -   <span class="string">`/\b\zhong\b/.test(&quot;liao zhong 123&quot;)`</span>:匹配字符串中是否有 zhong，并且是单词</span><br><span class="line">-   <span class="string">`\B`</span>:匹配非单词边界</span><br><span class="line">    -   <span class="string">`/\B\zhong\B/.test(&quot;liaozhong123&quot;)`</span>:匹配字符串中是否有 zhong，并且是不能是单词</span><br></pre></td></tr></table></figure>
<h4 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">-   <span class="string">`\`:反斜杠，转义使特殊字符变成普通字符，`</span>\.<span class="string">`这里的.只能代表.</span></span><br><span class="line"><span class="string">-   `</span>|<span class="string">`:或，(a|b|c)</span></span><br></pre></td></tr></table></figure>
<h3 id="Es6-正则"><a href="#Es6-正则" class="headerlink" title="Es6 正则"></a>Es6 正则</h3><h4 id="es6正则扩展"><a href="#es6正则扩展" class="headerlink" title="es6正则扩展"></a>es6正则扩展</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">-    <span class="string">`new RegExp(/xyz/ig,&quot;i&quot;)`</span>：/xyz/i i覆盖ig</span><br><span class="line">-    <span class="string">`u`</span>:修饰符 </span><br><span class="line">    -   使<span class="string">`.`</span>，或其他符号可以识别\uFFFF外的字符 <span class="string">`/^.$/u.test(&quot;𠮷&quot;)`</span> <span class="string">`/^\S$/.test(&#x27;𠮷&#x27;)`</span></span><br><span class="line">    -   <span class="string">`/\u&#123;61&#125;/u.test(&#x27;a&#x27;)`</span> <span class="comment">// true</span></span><br><span class="line">    -   无效转义报错 <span class="string">`/\,/u.test(&#x27;,&#x27;)`</span> 本来就不需要转</span><br><span class="line">    -   通过 <span class="string">`/xxx/.unicode`</span> 查看是否设置了u字符</span><br><span class="line">-   <span class="string">`y`</span>:粘连（sticky）修饰符。 </span><br><span class="line">    -   后一次匹配都从上一次匹配成功的下一个位置开始。(第一次必须首位开始,或者通过<span class="string">`reg.lastIndex`</span>设置起始匹配位置)</span><br><span class="line">    -   与g类似，试试y匹配的是一次或多次连续符合规则的字符</span><br><span class="line">    -   类似于在每次匹配前面加了 ^</span><br><span class="line">    -   <span class="string">`reg.sticky`</span> 查看是否设置了y</span><br><span class="line">-   <span class="string">`s`</span>:<span class="string">`.`</span>默认不包括<span class="string">`行终止符`</span>,加s就可以包括 (<span class="title class_">ES2018</span> dotAll模式)</span><br><span class="line">        -   U+000A 换行符（\n）</span><br><span class="line">        -   U+000D 回车符（\r）</span><br><span class="line">        -   U+<span class="number">2028</span> 行分隔符（line separator）</span><br><span class="line">        -   U+<span class="number">2029</span> 段分隔符（paragraph separator）</span><br><span class="line">        -   <span class="string">`res.dotAll`</span> 查看是否处在dotAll模式 </span><br><span class="line">-   <span class="string">`/abc/ig.flags`</span>:es6 返回正则表达式的修饰符</span><br><span class="line">-   <span class="string">`\p&#123;...&#125;`</span>: 匹配某一类<span class="title class_">Unicode</span>字符</span><br></pre></td></tr></table></figure>
<h4 id="具名组匹配"><a href="#具名组匹配" class="headerlink" title="具名组匹配"></a>具名组匹配</h4><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">-   `/(?&lt;year&gt;\d&#123;4&#125;)-(?&lt;month&gt;\d&#123;2&#125;)-(?&lt;day&gt;\d&#123;2&#125;)/.exec(<span class="string">&#x27;1999-12-31&#x27;</span>).groups.year;`</span></span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">-   <span class="built_in">let</span> re = /(?&lt;year&gt;\d&#123;4&#125;)-(?&lt;month&gt;\d&#123;2&#125;)-(?&lt;day&gt;\d&#123;2&#125;)/u;</span></span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">-   <span class="string">&#x27;2015-01-02&#x27;</span>.replace(re, <span class="string">&#x27;$&lt;day&gt;/$&lt;month&gt;/$&lt;year&gt;&#x27;</span>)</span></span><br></pre></td></tr></table></figure>
<h4 id="解构赋值和替换"><a href="#解构赋值和替换" class="headerlink" title="解构赋值和替换"></a>解构赋值和替换</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&#x27;2015-01-02&#x27;</span>.<span class="title function_">replace</span>(re, <span class="function">(<span class="params"></span></span></span><br><span class="line"><span class="params"><span class="function">    matched, <span class="comment">// 整个匹配结果 2015-01-02</span></span></span></span><br><span class="line"><span class="params"><span class="function">    capture1, <span class="comment">// 第一个组匹配 2015</span></span></span></span><br><span class="line"><span class="params"><span class="function">    capture2, <span class="comment">// 第二个组匹配 01</span></span></span></span><br><span class="line"><span class="params"><span class="function">    capture3, <span class="comment">// 第三个组匹配 02</span></span></span></span><br><span class="line"><span class="params"><span class="function">    position, <span class="comment">// 匹配开始的位置 0</span></span></span></span><br><span class="line"><span class="params"><span class="function">    S, <span class="comment">// 原字符串 2015-01-02</span></span></span></span><br><span class="line"><span class="params"><span class="function">    groups <span class="comment">// 具名组构成的一个对象 &#123;year, month, day&#125;</span></span></span></span><br><span class="line"><span class="params"><span class="function"></span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">let</span> &#123;day, month, year&#125; = groups;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">`<span class="subst">$&#123;day&#125;</span>/<span class="subst">$&#123;month&#125;</span>/<span class="subst">$&#123;year&#125;</span>`</span>;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ul>
<li><p>引用 <code>\k&lt;组名&gt;</code> 功能以前的\1效果一样</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">/^(?&lt;word&gt;[a-z]+)!\k&lt;word&gt;$/.<span class="title function_">test</span>(<span class="string">&#x27;abc!abc&#x27;</span>)</span><br></pre></td></tr></table></figure></li>
<li><p>匹配索引 reg.exec(str).indices <code>暂时不支持使用</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> s1 = <span class="string">&quot;xaaaz&quot;</span>;</span><br><span class="line"><span class="keyword">const</span> m1 = re1.<span class="title function_">exec</span>(s1);</span><br><span class="line">m1.<span class="property">indices</span>[<span class="number">0</span>][<span class="number">0</span>] === <span class="number">1</span>;</span><br><span class="line">m1.<span class="property">indices</span>[<span class="number">0</span>][<span class="number">1</span>] === <span class="number">5</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 第一次匹配起始结束 位置 第三阶段提案， https://github.com/tc39/proposal-regexp-match-Indices</span></span><br></pre></td></tr></table></figure></li>
<li><p>一次性取出所有匹配</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> string = <span class="string">&#x27;test1test2test3&#x27;</span>;</span><br><span class="line"><span class="keyword">const</span> regex = <span class="regexp">/t(e)(st(\d?))/g</span>;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(string.<span class="title function_">matchAll</span>(regex)) <span class="comment">//返回一个 Iterator遍历器</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">const</span> match <span class="keyword">of</span> string.<span class="title function_">matchAll</span>(regex)) &#123;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(match);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
<h3 id="linux-正则-与-通配符"><a href="#linux-正则-与-通配符" class="headerlink" title="linux 正则 与 通配符"></a>linux 正则 与 通配符</h3><blockquote>
<p>linux 指令中一般操作文件路径的用<code>通配符</code>,如:find，ls，cp 等,操作文件内容的用<code>正则</code>,如 grep</p>
</blockquote>
<h4 id="通配符"><a href="#通配符" class="headerlink" title="通配符"></a>通配符</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">-   <span class="string">`*`</span>：匹配零或多个任意字符</span><br><span class="line">-   <span class="string">`?`</span>:匹配任意单个字符</span><br><span class="line">-   <span class="string">`[]`</span>：指定中括号内的多个字符，如：[rwc]或[r,w,c]都行</span><br><span class="line">-   <span class="string">`[^]或[!]`</span>：除了中括号内字符外匹配任一个字符</span><br><span class="line">-   <span class="string">`&#123;a,b,c&#125;/&#123;a..z&#125;`</span>:a 或 b 或 c / a 到 z</span><br></pre></td></tr></table></figure>
<h4 id="linux-正则"><a href="#linux-正则" class="headerlink" title="linux 正则"></a>linux 正则</h4><p><a target="_blank" rel="noopener" href="https://www.linuxprobe.com/linux-regular-expression.html">文章</a><br><a target="_blank" rel="noopener" href="https://www.linuxprobe.com/docs/LinuxProbe.pdf">pdf</a></p>
<blockquote>
<p>匹配内容用正则，匹配文件名用通配符</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">-   元字符(<span class="variable constant_">BRE</span> 基本字符)</span><br><span class="line"></span><br><span class="line">    -   <span class="string">`*`</span>：匹配前面的字符零次或多次</span><br><span class="line">    -   <span class="string">`.`</span>：匹配任意一个字符</span><br><span class="line">    -   <span class="string">`[]`</span>：和通配符完全一样</span><br><span class="line">    -   <span class="string">`[^]`</span>：和通配符一样，但是没有[!]的写法</span><br><span class="line">    -   <span class="string">`^h、$h、\&lt;h、h\&gt;`</span>:行头 h、行尾 h、h 开头的单词、h 结束的单词</span><br><span class="line"></span><br><span class="line">-   特殊含义扩展元字符(扩展正则正常使用，默认需要加\，加上功能参数-e既可以不需要\了)</span><br><span class="line">    -   <span class="string">`?`</span>：前面的字符零次或一次，基本正则是?  好像没有</span><br><span class="line">    -   <span class="string">`+`</span>：前面的字符至少一次，基本正则是+</span><br><span class="line">    -   <span class="string">`|`</span>: 或</span><br><span class="line">    -   <span class="string">`()`</span></span><br><span class="line">    -   <span class="string">`&#123;&#125;`</span></span><br><span class="line">-   默认正则</span><br><span class="line">    -   特殊含义字符<span class="string">`默认没有功能`</span>,加上\才是功能元字符</span><br><span class="line">    -   ?、+、&#123;&#125;、()、、、需要反斜杠\，</span><br><span class="line">        -   <span class="string">`ro\?t`</span>(r 开头 t 结尾，o 可有可无)</span><br><span class="line">        -   <span class="string">`ro\+t`</span>(r 开头 t 结尾，o 至少一次，root、rot)</span><br><span class="line">-   扩展正则</span><br><span class="line">    -   把有特殊含义的符号，<span class="string">`默认拥有功能`</span>，如果要匹配字符要加上\转义</span><br><span class="line">    -   各个命令开启方式</span><br><span class="line">        -   <span class="attr">grep</span>: 一般 <span class="string">`-E参数`</span> 或 egrep 开启扩展正则</span><br><span class="line">    -   扩展正则新增操作</span><br><span class="line">        -   grep -E <span class="string">&quot;reg1|reg2&quot;</span></span><br><span class="line">-   其他</span><br><span class="line">    -   <span class="string">`=~`</span>:判断变量是否符合正则(<span class="string">`num=10;[[ $num =~ [0-9]&#123;2&#125; ]]`</span>)</span><br></pre></td></tr></table></figure>
<h3 id="案例"><a href="#案例" class="headerlink" title="案例"></a>案例</h3><ul>
<li>判断回文字符串</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">huiwenVis</span>(<span class="params">str</span>) &#123;</span><br><span class="line">    <span class="comment">//判断是否回文字符串，通过反向引用\n判断最后一个是否为第一个字符，中间类推</span></span><br><span class="line">    <span class="keyword">const</span> arr = <span class="title class_">Array</span>.<span class="title function_">from</span>(&#123; <span class="attr">length</span>: <span class="title class_">Math</span>.<span class="title function_">floor</span>(str.<span class="property">length</span> / <span class="number">2</span>) &#125;);</span><br><span class="line">    <span class="keyword">const</span> regExpStr = arr</span><br><span class="line">        .<span class="title function_">fill</span>(<span class="string">&quot;(.)&quot;</span>)</span><br><span class="line">        .<span class="title function_">concat</span>(str.<span class="property">length</span> % <span class="number">2</span> ? [<span class="string">&quot;.&quot;</span>] : [])</span><br><span class="line">        .<span class="title function_">concat</span>(arr.<span class="title function_">map</span>(<span class="function">(<span class="params">_, index</span>) =&gt;</span> <span class="string">`\\<span class="subst">$&#123;arr.length - index&#125;</span>`</span>))</span><br><span class="line">        .<span class="title function_">join</span>(<span class="string">&quot;&quot;</span>);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">RegExp</span>(<span class="string">`^<span class="subst">$&#123;regExpStr&#125;</span>$`</span>).<span class="title function_">test</span>(str);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">huiwenVis</span>(<span class="string">&quot;abccba&quot;</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">//其他方法: x.toString() === x.toString().split(&#x27;&#x27;).reverse().join(&#x27;&#x27;)</span></span><br></pre></td></tr></table></figure>

<ul>
<li>ip 端口地址验证</li>
<li>解析 rul</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> urls = <span class="string">&quot;https://www.baidu.com?a=1&amp;b=2&quot;</span>;</span><br><span class="line"><span class="keyword">let</span> q = &#123;&#125;;</span><br><span class="line">urls.<span class="title function_">replace</span>(<span class="regexp">/([^?&amp;=]+)=([^&amp;]+)/g</span>, <span class="function">(<span class="params">_, k, v</span>) =&gt;</span> (q[k] = v));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(q);</span><br></pre></td></tr></table></figure>
<ul>
<li><p>数字分割</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//(?!$) 后面不能是结束位置</span></span><br><span class="line"><span class="string">&#x27;1234567890&#x27;</span>.<span class="title function_">replace</span>(<span class="regexp">/\d&#123;3&#125;(?!$)/g</span>,<span class="function">(<span class="params">a</span>)=&gt;</span>a+<span class="string">&quot;,&quot;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// (?=(p)) 匹配找到 符合p子模式 前面的 那个位置</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;18060849356&#x27;</span>.<span class="title function_">replace</span>(<span class="regexp">/(?=(\d&#123;3&#125;)+$)/g</span>,<span class="string">&#x27;-&#x27;</span>)); <span class="comment">// 3的倍数字符串 第一位也会替换</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//从左往右以贪婪模式匹配以三个数字为一组(重复n&gt;=1次)结尾的字符串</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;18060849356&#x27;</span>.<span class="title function_">replace</span>(<span class="regexp">/(?!^)(?=(\d&#123;3&#125;)+$)/g</span>,<span class="string">&#x27;-&#x27;</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * &quot;123&quot;</span></span><br><span class="line"><span class="comment"> * \b它匹配的是一个位置，如同^和$代表字符串开头和结束的位置</span></span><br><span class="line"><span class="comment"> * \B 非单词边界, \B 匹配的的是1~2，2~3直接的位置 </span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * (?=) =&gt; x(?=y) 就是说x后面是y我们才去匹配x</span></span><br><span class="line"><span class="comment"> *      所以这边 (?=(\d&#123;3&#125;)+) 要的是后面存在 3的倍数 个数字的那个位置  </span></span><br><span class="line"><span class="comment"> *          所以 &#x27;18060849356&#x27;.replace(/\B(?=(\d&#123;3&#125;)+)/g, &#x27;-&#x27;) 结果是 1-8-0-6-0-8-4-9-356 </span></span><br><span class="line"><span class="comment"> *          9~3 之间后面是 356</span></span><br><span class="line"><span class="comment"> *          4~9 之间后面是 935</span></span><br><span class="line"><span class="comment"> *          0~8 之间后面是 849356  </span></span><br><span class="line"><span class="comment"> *          所以我们还要去掉那些，不是三个数字的间隔符</span></span><br><span class="line"><span class="comment"> * (?=(\d&#123;3&#125;)+(?!\d)) 是说 </span></span><br><span class="line"><span class="comment"> *    要的是后面存在 3的倍数 个数字的那个位置,并且这个 3的倍数 字符串后面不能是数字</span></span><br><span class="line"><span class="comment"> *    这边不是数字的只有结尾</span></span><br><span class="line"><span class="comment"> *    所以只有 符合\B条件的位置，后面的所有/3 要没有余数才行，否则它后面 3倍数字符串 后面就是余数，是数字，就不符合 (?!\d)</span></span><br><span class="line"><span class="comment"> * </span></span><br><span class="line"><span class="comment"> *  所有上面 用 $ 代替 (?!\d) 的方案，如果最后三个中有其他符号，是无法替换的，最后三个不符合\d&#123;3&#125;, 没有三个数字后面是结尾位置</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;18060849356&#x27;</span>.<span class="title function_">replace</span>(<span class="regexp">/\B(?=(\d&#123;3&#125;)+(?!\d))/g</span>, <span class="string">&#x27;2&#x27;</span>)); </span><br></pre></td></tr></table></figure>
</li>
<li><p>去除字符串中多出指定规则的内容</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//同时去除字符串前两位与后四位</span></span><br><span class="line"><span class="string">&#x27;12werty5678&#x27;</span>.<span class="title function_">replace</span>(<span class="regexp">/^\w&#123;2&#125;|\w&#123;4&#125;$/g</span>,<span class="string">&quot;&quot;</span>)</span><br></pre></td></tr></table></figure>
</li>
<li><p>判断单词是否由其他指定字符串组成</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">/^(hello|word|add)&#123;<span class="number">1</span>,&#125;$/.<span class="title function_">test</span>(<span class="string">&#x27;helloword&#x27;</span>);</span><br></pre></td></tr></table></figure>
</li>
<li><p>指定字符变色</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">item.<span class="property">value</span> = <span class="string">&#x27;xxxxabcxxxx&#x27;</span></span><br><span class="line"><span class="keyword">let</span> word = <span class="string">&#x27;abc&#x27;</span></span><br><span class="line"><span class="keyword">let</span> beflen = number;</span><br><span class="line"><span class="keyword">let</span> reg = <span class="keyword">new</span> <span class="title class_">RegExp</span>(<span class="string">`(?&lt;=.&#123;<span class="subst">$&#123;beflen&#125;</span>&#125;)<span class="subst">$&#123;word&#125;</span>`</span>);</span><br><span class="line">item.<span class="property">htmtmp</span> = item.<span class="property">value</span>.<span class="title function_">replace</span>(reg,<span class="function">(<span class="params">item</span>)=&gt;</span><span class="string">`&lt;span style=&quot;color:#f00;font-weight: bold;&quot;&gt;<span class="subst">$&#123;item&#125;</span>&lt;/span&gt;`</span>);</span><br></pre></td></tr></table></figure>
</li>
<li><p>split</p>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 不保留符号</span></span><br><span class="line"><span class="string">&quot;split&gt;=1xx&lt;=2xx&amp;&amp;3xx&quot;</span>.<span class="title function_">split</span>(<span class="regexp">/&gt;=|&lt;=|&amp;&amp;/</span>) <span class="comment">// [&#x27;split&#x27;, &#x27;1xx&#x27;, &#x27;2xx&#x27;, &#x27;3xx&#x27;]</span></span><br><span class="line"><span class="comment">// 保留符号</span></span><br><span class="line"><span class="string">&quot;split&gt;=1xx&lt;=2xx&amp;&amp;3xx&quot;</span>.<span class="title function_">split</span>(<span class="regexp">/(&gt;=|&lt;=|&amp;&amp;)&#123;1&#125;/</span>) <span class="comment">// [&#x27;split&#x27;, &#x27;&gt;=&#x27;, &#x27;1xx&#x27;, &#x27;&lt;=&#x27;, &#x27;2xx&#x27;, &#x27;&amp;&amp;&#x27;, &#x27;3xx&#x27;]</span></span><br><span class="line"><span class="comment">// 优先级</span></span><br><span class="line"><span class="string">&quot;split&gt;=111=222&gt;=333&quot;</span>.<span class="title function_">split</span>(<span class="regexp">/(&gt;=|=)&#123;1&#125;/</span>) <span class="comment">//[&#x27;split&#x27;, &#x27;&gt;=&#x27;, &#x27;111&#x27;, &#x27;=&#x27;, &#x27;222&#x27;, &#x27;&gt;=&#x27;, &#x27;333&#x27;]</span></span><br></pre></td></tr></table></figure>

<h3 id="ASCII"><a href="#ASCII" class="headerlink" title="ASCII"></a><a target="_blank" rel="noopener" href="https://www.habaijian.com/">ASCII</a></h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line">-   <span class="title class_">Unicode</span>-中文 [\u4e00-\u9fa5] 专注于简体 </span><br><span class="line">    -   经测试 [\u4e00-\u9fe6] 都是汉字 =&gt; 9fa5龥 、9fa6龦</span><br><span class="line">    -   经测试 [\u9fe7-\u9FFF] 都是空白 </span><br><span class="line">    -   所以说 [\u4e00-\u9FFF] 验证中文都是可以的</span><br><span class="line">-   十进制为<span class="number">0</span>到<span class="number">255</span>的字符 [\x00-\xFF]</span><br><span class="line">    -   字符串字节长度 str.<span class="title function_">replace</span>(<span class="regexp">/[^\x00-\xFF]/g</span>,<span class="string">&#x27;**&#x27;</span>).<span class="property">length</span>; </span><br><span class="line">    -   十六进制表示范围最大是<span class="number">0</span>-<span class="number">255</span> [\x00-\xFF] =&gt; 和 [\u0000-\u00FF] 是一样的</span><br><span class="line">    -   超过<span class="number">255</span>的如 <span class="string">`/[\x100]/.test(&#x27;   &#x27;)`</span> = <span class="literal">false</span>; <span class="string">`/[\u0100]/.test(&#x27;Ā&#x27;)`</span> = <span class="literal">true</span>;</span><br><span class="line">-   unicode的字符编码和utf-<span class="number">8</span>的存储编码表示是不同的</span><br><span class="line">    ![utf8转换](../../<span class="keyword">static</span>/img/<span class="number">20201231182051351.</span>png)</span><br><span class="line">-   utf-<span class="number">8</span>是变长的,<span class="variable constant_">UTF</span>规定：</span><br><span class="line">    -   <span class="string">`如果一个符号只占一个字节，那么这个8位字节的第一位就为0`</span> </span><br><span class="line">        -   **有效比特位 &lt;=<span class="number">7</span> 的unicode的字符编码二进制** [\u0000-\u007F]</span><br><span class="line">        -   如 <span class="number">0041</span> 的二进制位 	<span class="number">00000000</span> <span class="number">01000001</span>    =&gt; <span class="string">&quot;A&quot;</span></span><br><span class="line">            -   <span class="number">01000001</span>  utf-<span class="number">8</span></span><br><span class="line"></span><br><span class="line">    -   <span class="string">`如果为两个字节，那么规定第一个字节的前两位都为1，然后第一个字节的第三位为0，第二个字节的前两位为10`</span></span><br><span class="line">        -  **有效比特位 &gt;<span class="number">7</span> &amp;&amp; &lt;=<span class="number">11</span> 的unicode的字符编码二进制** [\u0080-\u07FF]</span><br><span class="line">        - 如 00FF 的二进制位 <span class="number">00000000</span> <span class="number">11111111</span>  =&gt; <span class="string">&quot;ÿ&quot;</span></span><br><span class="line">            -   拆分 <span class="number">0000</span> <span class="number">0000</span> <span class="number">1111</span> <span class="number">1111</span> (<span class="title class_">Unicode</span>字符编码)</span><br><span class="line">            -   拆分 <span class="number">1100</span> <span class="number">0011</span> <span class="number">1011</span> <span class="number">1111</span> = <span class="title function_">C3BF</span>(转<span class="variable constant_">UTF</span>-<span class="number">8</span>)</span><br><span class="line"></span><br><span class="line">    -   <span class="string">`然后如果是三个字节的话，那么第一个字节的前三位为111，第四位为0，剩余的两个字节的前两位都为10。`</span></span><br><span class="line">        -  **有效比特位 &gt;<span class="number">11</span> &amp;&amp; &lt;=<span class="number">16</span> 的unicode的字符编码二进制** [\u0800-\uFFFF]</span><br><span class="line">        -   如 <span class="number">4E25</span> 的二进制位 <span class="number">0100</span>,<span class="number">1110</span>,<span class="number">0010</span>,<span class="number">0101</span></span><br><span class="line">            -   拆分      <span class="number">0100</span>   <span class="number">11</span> <span class="number">1000</span>   <span class="number">10</span> <span class="number">0101</span>  (<span class="title class_">Unicode</span>字符编码)</span><br><span class="line">            -   拆分 <span class="number">1110</span> <span class="number">0100</span> <span class="number">1011</span> <span class="number">1000</span> <span class="number">1010</span> <span class="number">0101</span>  = <span class="variable constant_">E4B8A5</span> (转<span class="variable constant_">UTF</span>-<span class="number">8</span>)</span><br><span class="line">                    补四      补<span class="number">10</span>      补<span class="number">10</span></span><br><span class="line">    -   四个字节 有效比特位 &lt;=<span class="number">21</span></span><br><span class="line">    -   五个字节 有效比特位 &lt;=<span class="number">26</span></span><br><span class="line">    -   六个字节 有效比特位 &lt;=<span class="number">31</span> </span><br><span class="line"></span><br></pre></td></tr></table></figure></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="http://example.com">lzoxun</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="http://example.com/2023/07/22/web/RegExp/index/">http://example.com/2023/07/22/web/RegExp/index/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="http://example.com" target="_blank">学习笔记</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"></div><div class="post_share"><div class="social-share" data-image="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/2023/07/22/web/issues/issues-html/" title="html"><div class="cover" style="background: var(--default-bg-color)"></div><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">html</div></div></a></div><div class="next-post pull-right"><a href="/2023/07/22/web/JavaScript/%E5%9E%83%E5%9C%BE%E6%A1%B6/web-library-mockjs/" title="Mockjs"><div class="cover" style="background: var(--default-bg-color)"></div><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Mockjs</div></div></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src= "" data-lazy-src="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">lzoxun</div><div class="author-info__description"></div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">108</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">1</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">0</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/liaozhongxun"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/liaozhongxun" target="_blank" title="Github"><i class="fab fa-github" style="color: #24292e;"></i></a><a class="social-icon" href="mailto:869664233@gmail.com" target="_blank" title="Email"><i class="fas fa-envelope" style="color: #4a7dbe;"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">这是我的文档</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BD%9C%E7%94%A8"><span class="toc-number">1.</span> <span class="toc-text">作用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#JS-%E6%AD%A3%E5%88%99%E6%96%B9%E6%B3%95"><span class="toc-number">2.</span> <span class="toc-text">JS 正则方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%87%8D%E8%A6%81%E6%A6%82%E5%BF%B5"><span class="toc-number">3.</span> <span class="toc-text">重要概念</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B0%8F%E9%98%94%E5%8F%B7%E7%9A%84%E5%8A%9F%E8%83%BD"><span class="toc-number">4.</span> <span class="toc-text">小阔号的功能</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BC%96%E5%86%99%E8%A7%84%E5%88%99"><span class="toc-number">5.</span> <span class="toc-text">编写规则</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%9F%A5%E4%BB%80%E4%B9%88-%E5%8C%B9%E9%85%8D%E7%AC%A6"><span class="toc-number">5.1.</span> <span class="toc-text">查什么(匹配符)</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%B7%AE%E5%A4%9A%E5%B0%91-%E9%99%90%E5%AE%9A%E7%AC%A6"><span class="toc-number">5.2.</span> <span class="toc-text">差多少(限定符)</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BB%8E%E5%93%AA%E5%B7%AE-%E5%AE%9A%E4%BD%8D%E7%AC%A6"><span class="toc-number">5.3.</span> <span class="toc-text">从哪差(定位符)</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%85%B6%E4%BB%96"><span class="toc-number">5.4.</span> <span class="toc-text">其他</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Es6-%E6%AD%A3%E5%88%99"><span class="toc-number">6.</span> <span class="toc-text">Es6 正则</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#es6%E6%AD%A3%E5%88%99%E6%89%A9%E5%B1%95"><span class="toc-number">6.1.</span> <span class="toc-text">es6正则扩展</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%85%B7%E5%90%8D%E7%BB%84%E5%8C%B9%E9%85%8D"><span class="toc-number">6.2.</span> <span class="toc-text">具名组匹配</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%A7%A3%E6%9E%84%E8%B5%8B%E5%80%BC%E5%92%8C%E6%9B%BF%E6%8D%A2"><span class="toc-number">6.3.</span> <span class="toc-text">解构赋值和替换</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#linux-%E6%AD%A3%E5%88%99-%E4%B8%8E-%E9%80%9A%E9%85%8D%E7%AC%A6"><span class="toc-number">7.</span> <span class="toc-text">linux 正则 与 通配符</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%80%9A%E9%85%8D%E7%AC%A6"><span class="toc-number">7.1.</span> <span class="toc-text">通配符</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#linux-%E6%AD%A3%E5%88%99"><span class="toc-number">7.2.</span> <span class="toc-text">linux 正则</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A1%88%E4%BE%8B"><span class="toc-number">8.</span> <span class="toc-text">案例</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#ASCII"><span class="toc-number">9.</span> <span class="toc-text">ASCII</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2023/07/22/window/win-11/" title="win 11 set">win 11 set</a><time datetime="2023-07-22T07:14:09.700Z" title="发表于 2023-07-22 15:14:09">2023-07-22</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2023/07/22/window/win-gitbash/" title="git bash">git bash</a><time datetime="2023-07-22T07:14:09.700Z" title="发表于 2023-07-22 15:14:09">2023-07-22</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2023/07/22/window/win-wsl/" title="wsl">wsl</a><time datetime="2023-07-22T07:14:09.700Z" title="发表于 2023-07-22 15:14:09">2023-07-22</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2023/07/22/window/win-main/" title="window">window</a><time datetime="2023-07-22T07:14:09.700Z" title="发表于 2023-07-22 15:14:09">2023-07-22</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2023/07/22/web/%E5%85%BC%E5%AE%B9%E9%97%AE%E9%A2%98/" title="兼容问题">兼容问题</a><time datetime="2023-07-22T07:14:09.699Z" title="发表于 2023-07-22 15:14:09">2023-07-22</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2023 By lzoxun</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.umd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js" type="module"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js"></script><script>function panguFn () {
  if (typeof pangu === 'object') pangu.autoSpacingPage()
  else {
    getScript('https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js')
      .then(() => {
        pangu.autoSpacingPage()
      })
  }
}

function panguInit () {
  if (false){
    GLOBAL_CONFIG_SITE.isPost && panguFn()
  } else {
    panguFn()
  }
}

document.addEventListener('DOMContentLoaded', panguInit)</script><div class="js-pjax"></div><script id="canvas_nest" defer="defer" color="0,0,255" opacity="0.7" zIndex="-1" count="99" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/canvas-nest.min.js"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div class="no-result" id="local-search-results"></div><div id="local-search-stats-wrap"></div></div></div><div id="search-mask"></div><script src="/js/search/local-search.js"></script></div></div><script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"log":false,"model":{"jsonPath":"/live2dw/assets/haruto.model.json"},"display":{"position":"right","width":100,"height":200,"right":300},"mobile":{"show":true}});</script></body></html>